<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
    /*
        react和vue中key的作用
            1.虚拟DOM中key的作用：
                1.简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用
                2.详细的说 ：当状态的数据发生变化时，react会根据[新数据]生成[新的虚拟DOM]
                            随后React进行[新虚拟DOM]与[旧的虚拟DOM]的diff进行比较
                                (1)若旧的虚拟DOM中找到了与新的虚拟DOM相同的key：
                                    若新的虚拟DOM中的值没有改变，则会使用之前的真实DOM不会重新生成
                                    若新的虚拟DOM中的值改变了，则会生成新的真实DOM替换掉之前的真实DOM
                                (2)若旧的虚拟DOM中没有找到和新的虚拟DOM一样的key值
                                    会根据新的虚拟DOM生成新的真实DOM节点渲染到界面上
            2.用index作为key可能引发的问题：
                1.若对数据进行：逆序添加、逆序删除等破坏顺序的操作：
                    会产生没有必要的真实DOM更新，界面效果没有问题但是效率低
                2.如果结构中包含输入类的DOM
                    会产生错误的DOM更新，界面会由问题
                3.如果不存在对数据的逆序添加，逆序删除等破坏顺序性的操作，使用index作为key时没有问题的
            3.如何选择key
                1.最好使用每条数据的唯一标识最为key，比如id、手机号、身份证号、学号
                2.如果确定值是简单的数据展示，用index也是可以的
    */
        class Test extends React.Component {
            state = {date:new Date()};
            componentDidMount() {
                setInterval(() =>{
                    this.setState({date:new Date})
                },1000)
            }
            render() { 
                return  (
                    <div>
                        <h1>hello</h1>
                        <input type="text"/>
                        <span>现在是:{this.state.date.toTimeString()}</span>
                    </div>
                )
            }
        }
        ReactDOM.render(<Test />, document.getElementById("test")) 
    </script>
</body>
</html>